<template>
  <ContainerGroup>
    <Container height="fill" style="padding: 0px; overflow: hidden">
      <div v-loading="warploading" class="main-wrap">
        <!-- 病区 -->
        <div v-if="nurseCellName" class="left">
          {{ nurseCellName }} {{ `（${deptName}）` }}
        </div>
        <!-- 病房 -->
        <div ref="heightdepartment" class="department-box">
          <div v-for="item in bedsListPer" :key="item.name" class="ment">
            <div class="ment-box">
              <div
                v-for="(item1, index2) in item.children"
                :key="index2"
                :class="`ment-position ${item1.className} ${item1.sexColor}`"
                @click="getData(item1)"
              >
                <div class="room-status">
                  <img
                    v-if="item1.isHisConfirm === '1'"
                    src="../../assets/image/time-icon.png"
                    class="status-img"
                    alt
                    style="width: 12px; height: 12px"
                  />
                </div>
                <div class="room-num">{{ item1.name }}</div>
                <div v-if="item1.patinetName" class="ment-name">
                  {{ item1.patinetName }}
                </div>
                <div v-if="item1.sexColor === 'three-div'" class="ment-name">
                  <img
                    src="../../assets/image/eeeeeee.png"
                    class="bed-img"
                    alt
                  />
                </div>
                <div v-if="item1.sexColor !== 'three-div'" class="ment-name">
                  <img
                    src="../../assets/image/ffffff.png"
                    class="bed-img"
                    alt
                  />
                </div>
              </div>
            </div>
            <div class="house-num">{{ item.roomNum }}</div>
          </div>
        </div>
        <!-- 患者信息 -->
        <div class="informationbox">
          <div style="margin-bottom: 13px">
            <span style="font-size: 18px; color: #555555; margin-right: 7px">{{
              impatientInfo.name
            }}</span>
            <span class="seximg">
              <img
                v-if="impatientInfo.sex === '1'"
                src="../../assets/image/man.png"
                alt
              />
              <img
                v-if="impatientInfo.sex === '2'"
                src="../../assets/image/woman.png"
                alt
              />
            </span>
            <span style="margin-right: 7px; color: #666666"
              >{{ impatientInfo.age }}岁</span
            >
            <span
              v-if="impatientInfo.consultationCode === '6'"
              class="emergency-treatment"
              >急诊</span
            >
            <span
              v-if="impatientInfo.consultationCode !== '6'"
              class="outpatient-department"
              >门诊</span
            >
            <span v-if="impatientInfo.preState === '4'" class="stayinbed-name"
              >待床</span
            >
            <span v-if="impatientInfo.patientTag === '2'" class="youxian"
              >院前</span
            >
          </div>
          <div style="color: #666666">
            <span style="margin-right: 7px">科室:</span>
            <span>{{ impatientInfo.deptName }}</span>
          </div>
          <div style="color: #666666">
            <span style="margin-right: 7px">入院诊断:</span>
            <span>{{ impatientInfo.diagName }}</span>
            <span />
          </div>
          <div
            style="
        color: #666666;
        margin-right: 10px;
        vertical-align: top;
        clear: both;
        "
          >
            <span style="margin-right: 7px">预约时间:</span>
            <span>{{ impatientInfo.predate }}</span>
          </div>
          <div>
            <span class="register" @click="handleYuYue">
              <img
                style="margin-right: 7px"
                src="../../assets/image/addperpro.png"
                alt
              />
              预约
            </span>
          </div>
          <span :class="impatientInfo.bigDiv">
            <div :class="impatientInfo.radioModel" />
          </span>
        </div>
      </div>
    </Container>
    <!-- <div v-show="menuVisible">
      <ul v-if="usedBed === true" id="menu" class="menu" @mouseover="onleitve">
        <li class="menu__item" style="margin-top: 3px" @click="usedBedBtn">占床</li>
        <li class="menu__item" @click="btn1">取消</li>
      </ul>
      <template v-else>
        <ul v-if="userBed === true" id="menu" class="menu" @mouseover="onleitve">
          <li class="menu__item" style="margin-top: 3px" @click="occupationbtn">取消占床</li>
          <li class="menu__item" @click="btn1">取消</li>
        </ul>
        <div v-if="userBed === false">
          <ul v-if="rightClibox === true" id="menu" class="menu" @mouseover="onleitve">
            <li class="menu__item" style="margin-top: 3px" @click="btn">转床</li>
            <li class="menu__item" @click="btn1">取消</li>
          </ul>
          <ul v-if="rightClibox === false" id="menu" class="menu">
            <li class="menu__item1" style="margin-top: 3px">转床</li>
            <li class="menu__item1">取消</li>
          </ul>
        </div>
      </template>
    </div> -->
  </ContainerGroup>
</template>
<script>
import Container from "../../components/Container.vue";
import second from "./second.vue";
import {
  // getEemptyBedsDetails,
  getReservationRjssDetail,
  // getEemptyPatientList,
  getEemptyPatientListNew,
  getWardList,
  getDeptList,
  getEemptyBedsDetailsinfo,
  // getEemptyBeds,
  changePatientBed,
  getEemptysByPatien,
  addPatientBed,
  getBedByNurseCellCode,
  getPatientAreaDTO,
  unUsedOccupationBed,
  getDoctList,
  insertOccupationBed,
  getThisIiPrepayinByPreid,
  addPatientRjssBed,
} from "../../utils/apis/registrationApi";
// import OperationContainer from "../../components/OperationContainer.vue";
export default {
  name: "RegiStrationfilst",
  components: { Container, second },
  data() {
    return {
      userBed: false,
      widthStyle: "width:" + window.screen.width + "px",
      maxHeight: "100%",
      containerHeight: "122px", // 患者信息盒子高度
      showCloseAndOpen: false, // 患者信息盒子的状态
      openOrCloseText: "查看全部", // 患者信息查看全部的文本
      hospitalizationHeight: "122px", // 住院信息盒子高度
      hospitalizationOpen: true, // 住院信息盒子的状态
      hospitalizationText: "查看全部", // 住院信息查看全部的文本
      durg: false, // 拖拽
      dialogVisible: false,
      menuVisible: false, // 右键点击
      nodata: false,
      conHeight: "35px",
      showOpen: false,
      openText: "展开",
      bedListArr: [], // 全部床位列表
      patientName: "", // 病人姓名
      patientId: "", // 病人id
      bedId: "",
      changeBedbedId: "",
      changeBedpatientId: "", // 病人id
      changeBedpatientName: "", // 病人姓名
      bedloading: false,
      patientloading: false,
      deptCodeR: "",
      ifGy: "",
      sexchecked: false,
      patinetName: null,
      bedOrdet: {}, // 选中床的信息
      patientSex: "",

      usedBed: false,
      inforAlldata: true,
      rightClibox: false,
      warploading: false,
      nurseCellName: "二十一病区",
      deptName: "日间治疗中心",
      preid: "",
      allFlbox: false,
      mentloading: false,
      occupationBed: "",
      occupationState: true,
      avsB: false,
      bedsListPer: [],
      impatientInfo: {},
    };
  },
  created() {},
  mounted() {
    this.bedsType = this.$route.query.bedsType;
    this.yard = this.$route.query.yard;
    this.preid = this.$route.query.preid;
    this.openMent();
    this.getPatientDetailCard();
    this.menuVisible = false;
    this.tableLoading = true;
    // this.yuanId = this.routeParams.districtCodeList
    setTimeout(() => {
      this.tableLoading = false;
    }, 1500);
    this.initShowCloseOrOpen();
    window.addEventListener("resize", this.initShowCloseOrOpen);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.initShowCloseOrOpen);
  },
  methods: {
    handleYuYue() {
      if (!this.bedNo) {
        this.$message.warning("请选择要预约的床位");
        return;
      }

      const content =
        '<p  style="word-break:break-all;width:386px">' +
        "将分配至" +
        this.bedNo +
        "床,确定此操作吗?" +
        "</p>";
      this.$confirm({
        content: content,
        title: "床位预约",
        okFn: (res) => {
          const param = {
            preid: this.preid,
            bedId: this.bedNo,
          };
          addPatientRjssBed(param).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.message);
              this.openMent();
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        cancelFn: (res) => {
          console.log("取消");
        },
      });
    },
    getPatientDetailCard() {
      //获取病人信息(最右侧)
      getThisIiPrepayinByPreid({
        preid: this.preid,
      }).then((res) => {
        if (res.data.code === 200) {
          this.impatientInfo = res.data.data;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    initShowCloseOrOpen() {
      setTimeout(() => {
        this.showOpen =
          this.$refs["input-container"] &&
          this.$refs["input-container"].scrollHeight > 35;
      }, 50);
    },
    // 院区变化- 请求
    changeHospital() {
      this.getmoreAdd();
    },
    typeChange(val) {
      // 这里发生变化直接调用查询接口
      if (val) {
        this.bedType = val;
      } else {
        this.bedType = "";
      }
      this.warploading = true;
      this.openMent(val);
    },
    // 获取床位
    openMent(data) {
      this.close = true;
      this.widthStyle = "width:380px;";
      const params = {
        areaCode: "2739",
        bedState: "",
        bedType: "",
        deptCode: "1664",
        districtCode: "1",
        bedNo: "",
      };
      getReservationRjssDetail(params).then((res) => {
        this.warploading = false;
        if (res.data.code === 200) {
          this.bedsListPer = res.data.data;
          // this.initPageData()
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    initPageData() {
      // let index = 0
      for (const i in this.bedsList) {
        const obj = {
          roomNum: i,
          children: this.bedsList[i],
        };
        this.bedsListPer.push(obj);
        // this.bedsListPer[index] = {}
        // this.$set(this.bedsListPer[index], 'roomNum', i)
        // this.$set(this.bedsListPer[index], 'children', this.bedsList[i])
        // this.bedsListPer[index].roomNum = i
        // this.bedsListPer[index].children = this.bedsList[i]
        // index++
      }
      // console.log(this.bedsListPer)
      // this.nurseCellName = this.bedsListPer[0].children[0].nurseCellName
      // this.deptName = this.bedsListPer[0].children[0].deptName
    },
    openForm() {
      this.conHeight = this.openText === "展开" ? "auto" : "35px";
      this.openText = this.openText === "展开" ? "收起" : "展开";
    },
    // _routeParams() {
    //   const obj = JSON.parse(sessionStorage.pageTabList)
    //   const paramss = obj.filter(item => {
    //     return item.name === '预约详情'
    //   })
    //   this.routeParams = paramss[0] && paramss[0].params || {}
    //   console.log('------------', this.routeParams)
    //   this.bedType = this.routeParams??bedType[0] // 床位类型
    //   this.bedStatus = this.routeParams.bedStatus && this.routeParams.bedStatus[0]
    //   this.deptCode = this.routeParams?.deptCode
    //   this.nurseCellCode = this.routeParams?.areaCode
    // },
    //  抽屉转床
    drawConfirm() {},
    // 转床
    changeBed() {
      if (this.changeBedpatientName === "" && this.changeBedpatientId === "") {
        this.$message.error("请选择需要转床病人");
        return;
      }
      if (this.bedValue === "") {
        this.$message.error("请选择需要转入的床位");
        return;
      }
      const bedarr = this.bedValue.split("-");
      const parms = {
        bedId: bedarr[0],
        name: this.changeBedpatientName,
        patientId: this.changeBedpatientId,
      };
      const arrdept = this.deptValue.split("-");
      parms.deptName = arrdept[1];
      parms.deptCode = arrdept[0];
      parms.sdeptCode = arrdept[2];
      const arr = this.areaValue.split("-");
      const content = `<div  style="word-break:break-all;width:386px">确定将${this.bedinfo}转至${arrdept[1]}${arr[1]}${bedarr[1]}号床吗?</div>`;
      this.$confirm({
        content: content,
        title: "确认信息",
        okFn: (res) => {
          changePatientBed(parms).then((res) => {
            if (res.data.code === 200) {
              this.$message.success("操作成功!");
              this.rotatingBed = false;
              this.bedValue = "";
              this.areaValue = "";
              this.openMent();
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        cancelFn: (res) => {
          this.bedValue = "";
          this.areaValue = "";
        },
      });
    },
    // 获取转床时-床位
    // getOrbed() {
    //   this.bedValue = ''
    //   this.bedBox = []
    //   const arr = this.areaValue.split('-')
    //   getBedByNurseCellCode({ nurseCellCode: arr[0] }).then(res => {
    //     if (res.data.code === 200) {
    //       let dats = {
    //         label: '',
    //         value: ''
    //       }
    //       res.data.data.forEach(element => {
    //         dats = {
    //           label: element.name,
    //           value: element.id + '-' + element.name
    //         }
    //         this.bedBox.push(dats)
    //       })
    //     }
    //   })
    // },
    // 床位类型变化-请求
    changeBedType() {
      let obj = JSON.parse(sessionStorage.pageTabList);
      obj = obj.map((item) => {
        if (item.name === "预约详情") {
          item.params.bedType = this.bedType;
        }
        return item;
      });
      sessionStorage.pageTabList = JSON.stringify(obj);
      this.openMent();
      //  1 集中   0 非集中
    },
    // 床位状态变化-请求
    changeBedStatus() {
      let obj = JSON.parse(sessionStorage.pageTabList);
      obj = obj.map((item) => {
        if (item.name === "预约详情") {
          item.params.bedStatus = this.bedStatus;
        }
        return item;
      });
      sessionStorage.pageTabList = JSON.stringify(obj);
      //  1 空床   2 非空
      this.openMent();
    },
    // 入院方式
    _ryfs(patientmessageList) {
      if (
        patientmessageList.ifEmergency !== null &&
        patientmessageList.ifEmergency === "1"
      ) {
        return "急";
      } else if (
        patientmessageList.ifWalk !== null &&
        patientmessageList.ifWalk === "1"
      ) {
        return "步行";
      } else if (
        patientmessageList.ifChair !== null &&
        patientmessageList.ifChair === "1"
      ) {
        return "抬车";
      } else if (
        patientmessageList.ifAmbulance !== null &&
        patientmessageList.ifAmbulance === "1"
      ) {
        return "病床";
      } else {
        return "-";
      }
    },
    // 床位登记
    handleBed(bedId, ifGy, patinetName) {
      this.bedId = bedId;
      this.ifGy = ifGy;
      this.patinetName = patinetName;
    },
    // 床位登记
    // handlebedRegister() {
    //   if (this.bedId === "") {
    //     this.$message.error("请选择床位");
    //   } else if (this.ifGy !== "1") {
    //     this.$message.error("此床位为非集中床位，请选择有小红旗的空床");
    //   } else if (this.patinetName !== null) {
    //     this.$message.error("此床位已有人住，请选择空床");
    //   } else {
    //     const params = {
    //       bedId: this.bedId,
    //       name: this.patientName,
    //       patientId: this.patientId,
    //     };
    //     addPatientBed(params).then((res) => {
    //       if (res.data.code === 200) {
    //         this.$message.success(res.data.message);
    //         this.getBedList();
    //       } else {
    //         this.$message.error(res.data.message);
    //       }
    //     });
    //   }
    // },
    openAndCloseFilterForm() {
      this.containerHeight =
        this.openOrCloseText === "查看全部" ? "auto" : "120px";
      this.openOrCloseText =
        this.openOrCloseText === "查看全部" ? "收起" : "查看全部";
    },
    openHospitalization() {
      this.hospitalizationHeight =
        this.hospitalizationText === "查看全部" ? "auto" : "120px";
      this.hospitalizationText =
        this.hospitalizationText === "查看全部" ? "收起" : "查看全部";
    },
    funArr(arr) {
      arr.forEach((item) => {
        item.roomAndBedList.forEach((elm, index) => {
          if (elm.length > 6) {
            item.roomAndBedList.splice(index, 1);
          }
        });
      });
      return arr;
    },
    // 获取房间
    // getBedList() {
    //   this.bedListArrloading = true;
    //   const bedTypeCodeList = [];
    //   const districtCodeList = [];
    //   let isEmptyCodeList = "";
    //   if (this.form.bedType.jzbed) {
    //     bedTypeCodeList.push("1");
    //   }
    //   if (this.form.bedType.fjzbed) {
    //     bedTypeCodeList.push("0");
    //   }
    //   if (this.form.hospitalArea.sxhospital) {
    //     districtCodeList.push("1");
    //   }
    //   if (this.form.hospitalArea.xghospital) {
    //     districtCodeList.push("2");
    //   }
    //   if (this.form.bedState.kongbed) {
    //     isEmptyCodeList = "1";
    //   }
    //   if (this.form.bedState.feikongbed) {
    //     isEmptyCodeList = "2";
    //   }
    //   if (!this.form.bedState.feikongbed && !this.form.bedState.kongbed) {
    //     isEmptyCodeList = "3";
    //   }
    //   if (this.form.bedState.feikongbed && this.form.bedState.kongbed) {
    //     isEmptyCodeList = "3";
    //   }
    //   const parms = {
    //     bedTypeCodeList: bedTypeCodeList,
    //     districtCodeList: districtCodeList,
    //     sfkc: isEmptyCodeList,
    //     name: "三香总院",
    //     patientSex: this.patientSex, // 患者性别-根据患者获取床位用
    //   };
    //   if (this.form.illnessArea !== "全部") {
    //     parms.areaCode = this.form.illnessArea;
    //   }
    //   if (this.form.department !== "全部") {
    //     parms.deptCode = this.form.department;
    //   }
    //   getEemptysByPatien(parms).then((res) => {
    //     if (res.data.code === 200) {
    //       this.bedListArrloading = false;
    //       this.bedListArr = res.data.data;
    //       this.bedList = this.funArr(res.data.data);
    //     }
    //   });
    // },
    // 获取 科室 和  病区 下拉框数据
    // getmoreAdd() {
    //   console.log(this.region)
    //   this.areaBox = []
    //   this.deptBox = []
    //   getWardList({ yard: this.region }).then(res => {
    //     if (res.data.code === 200) {
    //       let dats = {
    //         label: '',
    //         value: ''
    //       }
    //       res.data.data.forEach(element => {
    //         dats = {
    //           label: element.deptName,
    //           value: element.deptCode + '-' + element.deptName
    //         }
    //         this.areaBox.push(dats)
    //       })
    //     }
    //   })
    //   getDeptList({ yard: this.region }).then(res => {
    //     if (res.data.code === 200) {
    //       let dats = {
    //         label: '',
    //         value: ''
    //       }
    //       res.data.data.forEach(element => {
    //         dats = {
    //           label: element.deptName,
    //           value:
    //             element.deptCode +
    //             '-' +
    //             element.deptName +
    //             '-' +
    //             element.sdeptCode
    //         }
    //         this.deptBox.push(dats)
    //       })
    //     }
    //   })
    // },
    // 获取病区下拉数据
    // getWard() {
    //   this.ruleFormSelect.nurseCellCodeoptions = []
    //   const parms = {
    //     districtCodeList: ['1', '2']
    //   }
    //   getWardList(parms).then(res => {
    //     if (res.data.code === 200) {
    //       let dats = {
    //         label: '',
    //         value: ''
    //       }
    //       res.data.data.forEach(element => {
    //         dats = {
    //           label: element.deptName,
    //           value: element.deptCode
    //         }
    //         this.ruleFormSelect.nurseCellCodeoptions.push(dats)
    //       })
    //     }
    //   })
    // },
    // 获取科室下拉数据
    // getDept() {
    //   this.ruleFormSelect.deptCodeoptions = []
    //   this.hospitalizationSelect.departmentoptions = []
    //   const parms = {
    //     districtCodeList: [this.routeParams?.districtCodeList]
    //   }
    //   getDeptList(parms).then(res => {
    //     if (res.data.code === 200) {
    //       let dats = {
    //         label: '',
    //         value: ''
    //       }
    //       let beddats = {
    //         label: '',
    //         value: ''
    //       }
    //       res.data.data.forEach(element => {
    //         dats = {
    //           label: element.deptName,
    //           value: element.deptCode
    //         }
    //         beddats = {
    //           label: element.deptName,
    //           value: element.deptCode + '-' + element.deptName
    //         }
    //         this.ruleFormSelect.deptCodeoptions.push(dats)
    //         this.hospitalizationSelect.departmentoptions.push(beddats)
    //       })
    //     }
    //   })
    // },
    // 点击床位  获取信息 / 未登记人员
    getData(item) {
      this.bedsListPer.forEach((pItem) => {
        pItem.children.forEach((cItem) => {
          this.$set(cItem, "className", "");
          if (cItem.name === item.name) {
            cItem.className = "ment-position1";
          } else {
            cItem.className = "no-ment-position1";
          }
        });
      });
      this.bedNo = item.bedNo;
    },
    // 鼠标移入
    // onleitve() {
    //   var lis = document.getElementsByTagName("li");
    //   for (let i = 0; i < lis.length; i++) {
    //     lis[i].onmouseover = function() {
    //       this.style.color = "#217DFA";
    //     };
    //     lis[i].onmouseout = function() {
    //       this.style.color = "#555555";
    //     };
    //   }
    // },
    resetForm() {
      this.ManualInputVisible = false;
      this.$refs.bedForm.resetFields();
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          const params = { ...this.bedForm };
          const arr = params.deptCode.split("-");
          const arr1 = params.nurseCellCode.split("-");
          const arr2 = params.subscribeDoctCode.split("-");
          params.deptName = arr[1];
          params.deptCode = arr[0];
          params.nurseCellName = arr1[1];
          params.nurseCellCode = arr1[0];
          params.subscribeDoctCode = arr2[0];
          params.subscribeDoctName = arr2[1];
          insertOccupationBed(params).then((res) => {
            if (res.data.code === 200) {
              this.$message.success(res.data.data);
              this.resetForm();
              this.openMent();
            } else {
              this.$message.error(res.data.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    btn1() {},
    rightClick(MouseEvent, item) {
      console.log(item);
      var menu;
      if (item.isHisConfirm === "1") {
        this.userBed = false;
        this.usedBed = false;
        this.bedinfo =
          item.deptName +
          item.nurseCellName +
          "(" +
          item.roomNo +
          ")" +
          item.name +
          "号床" +
          item.patinetName;
        this.deptNameinfo = item.deptName;
        if (item.isNotChange === "0") {
          this.rightClibox = true;
          this.deptValue =
            item.deptCode + "-" + item.deptName + "-" + item.sdeptCode;
          this.changeBedpatientName = item.patinetName;
          this.changeBedpatientId = item.inpatientNo;
          this.menuVisible = true;
          menu = document.querySelector("#menu");
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + "px";
            menu.style.top = MouseEvent.clientY + "px";
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + "px";
            menu.style.top = MouseEvent.clientY + 7 + "px";
          }
          document.addEventListener("click", this.foo);
        } else {
          this.deptCodeR = item.deptCode;
          this.deptValue =
            item.deptCode + "-" + item.deptName + "-" + item.sdeptCode;
          this.rightClibox = false;
          this.changeBedpatientName = item.patinetName;
          this.changeBedpatientId = item.inpatientNo;
          this.menuVisible = true;
          menu = document.querySelector("#menu");
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + "px";
            menu.style.top = MouseEvent.clientY + "px";
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + "px";
            menu.style.top = MouseEvent.clientY + 7 + "px";
          }
          document.addEventListener("click", this.foo);
        }
      } else {
        // 占床
        if (item.occupationState === "0") {
          this.usedBed = false;
          this.userBed = true;
          this.occupationId = item.occupationId;
          this.occupybedNo = item.bedNo;
          this.menuVisible = true;
          menu = document.querySelector("#menu");
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + "px";
            menu.style.top = MouseEvent.clientY + "px";
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + "px";
            menu.style.top = MouseEvent.clientY + 7 + "px";
          }
          document.addEventListener("click", this.foo);
        } else if (item.ifGy === "1" && item.bedState === "b") {
          this.usedBed = true;
          this.menuVisible = true;
          this.userBed = false;
          this.bedForm.bedNo = item.bedNo;
          menu = document.querySelector("#menu");
          if (MouseEvent.screenX < 100) {
            menu.style.left = MouseEvent.clientX + "px";
            menu.style.top = MouseEvent.clientY + "px";
          }
          if (MouseEvent.screenX > 100) {
            menu.style.left = MouseEvent.clientX + 4 + "px";
            menu.style.top = MouseEvent.clientY + 7 + "px";
          }
          document.addEventListener("click", this.foo);
        }
      }
    },
    foo() {
      // 取消鼠标监听事件 菜单栏
      this.menuVisible = false;
      document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
    },
    format(percentage) {
      return percentage === 100 ? "100" : `${percentage}`;
    },
    handleFun() {},

    pageChange(page) {},
    handlerEidt(row) {
      this.dialogVisible = true;
    },
    handlerDetail(row) {
      this.drawerVisible = true;
    },
    handerSearch(val) {},
    // 重置
    handlerReset() {
      this.ruleForm = {
        deptCode: "",
        nurseCellCode: "",
      };
      this.bedType = ["1"];
      this.bedStatus = ["1"];
    },
    handlerDelete(row) {
      this.$confirm({
        content: "确定要删除该项吗？",
        title: "确认信息",
        okFn: (res) => {
          console.log(res);
        },
        cancelFn: (res) => {
          console.log("取消");
        },
      });
    },
    handlerDeleteAll(params) {
      console.log(this.$toast.warning("失败了"));
      // this.$toast.warning("成功了")
    },
    dialogConfirm() {
      console.log("ss");
    },
    getSelectionItems(list) {
      console.log(list);
    },
    // 占床医生
    remoteMethod(val) {
      this.hospitalizationSelect.predoctCodeoptions = [];
      const arr = this.bedForm.deptCode.split("-");
      getDoctList({ deptCode: arr[0], name: val }).then((res) => {
        if (res.data.code === 200) {
          let dats = {
            label: "",
            value: "",
          };
          res.data.data.forEach((element) => {
            dats = {
              label: element.name,
              value: element.id + "-" + element.name,
            };
            this.hospitalizationSelect.predoctCodeoptions.push(dats);
          });
        }
      });
    },
    // 占床根据科室查病区
    beddeptChange(val, areaCode) {
      this.bedForm.subscribeDoctCode = "";
      this.hospitalizationSelect.inpatientAreaoptions = [];
      this.hospitalizationSelect.predoctCodeoptions = [];
      const arr = this.bedForm.deptCode.split("-");
      getPatientAreaDTO({ deptCode: arr[0], areaCode: areaCode }).then(
        (res) => {
          if (res.data.code === 200) {
            let dats = {
              label: "",
              value: "",
            };
            res.data.data.forEach((element) => {
              dats = {
                label: element.areaName,
                value: element.areaId + "-" + element.areaName,
              };
              this.hospitalizationSelect.inpatientAreaoptions.push(dats);
            });
          }
        }
      );
    },
  },
};
</script>
<style lang="less" scoped>
.drawer-warp {
  height: 100%;
}
.form-item {
  min-width: 280px;
  height: 28px;
  margin-bottom: 30px;
}
.main-wrap {
  display: flex;
  height: 100%;
  overflow-y: hidden;
  background: #f0f2f5;
}
.department-box {
  padding: 12px 11px 10px 10px;
  box-sizing: border-box;
  display: flex;
  overflow-y: auto;
  height: 100%;
  flex-wrap: wrap;
  flex: 1;
  flex-direction: row;
  margin-right: 10px;
  background: white;
}
.form-bed {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 21px 0 0 29px;
  box-sizing: border-box;
  border-bottom: 1px solid #ccc;
  p {
    margin-right: 45px;
    margin-bottom: 26px;
    .bed-title {
      margin-right: 10px;
    }
  }
}
.drawer-box {
  padding-top: 15px;
  p {
    width: 100%;
    height: 40px;
    background-color: #f4f8fb;
    color: #555555;
    font-size: 16px;
    line-height: 40px;
    padding-left: 15px;
    box-sizing: border-box;
  }
  .box-information {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    padding: 23px 0px 23px 20px;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    .basic-box {
      display: flex;
      flex-wrap: wrap;
      overflow: hidden;
      color: #555555;
      div {
        width: 240px;
        // height: 33px;
        line-height: 33px;
        font-size: 14px;
        margin-right: 12px;
      }
    }
    .more-text {
      width: 100px;
      position: absolute;
      right: 10px;
      bottom: 20px;
      color: rgba(24, 144, 255, 100);
      cursor: pointer;
      font-size: 14px;
    }
  }
  .demo-ruleForm {
    box-sizing: border-box;
    padding: 15px 18px 0 11px;
    .formitem {
      display: flex;
      justify-content: space-between;
    }
    /deep/ .el-form-item__error {
      padding: 0 !important;
    }
    .el-form-item {
      margin-bottom: 10px !important;
    }
    /deep/ .el-form-item__label {
      color: #555555 !important;
    }
  }
  .el-table /deep/.cell {
    font-size: 14px !important;
  }
  .el-button /deep/ span {
    font-size: 14px !important;
  }
}
.surebtn {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 17px;
  display: inline-block;
  height: 17px;
  border: 1px solid #62a3fd;
  border-radius: 50%;
  background-color: #62a3fd;
}
.surebtn1 {
  position: absolute;
  right: 9%;
  bottom: 7%;
  width: 17px;
  display: inline-block;
  height: 17px;
  border: 1px solid rgb(220, 223, 230);
  border-radius: 50%;
}
.seximg {
  width: 15px;
  height: 15px;
  margin-right: 7px;
  display: inline-block;
}
.seximg img {
  width: 15px;
  height: 15px;
}
.outpatient-department {
  width: 50px;
  height: 24px;
  background: #37c0cd;
  border: 1px solid #37c0cd;
  color: #ffffff;
  line-height: 24px;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.youxian {
  width: 50px;
  height: 24px;
  background: #fc6161;
  border: 1px solid #fc6161;
  color: #ffffff;
  line-height: 24px;
  display: inline-block;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.no-craatperpro {
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  top: 60px;
  left: 0;
  background-color: #fff;
}
.stayinbed-name {
  width: 50px;
  text-align: center;
  height: 24px;
  display: inline-block;
  line-height: 24px;
  background: #ddebff;
  color: #2b80ff;
  border: 1px solid #2b80ff;
  border-radius: 4px;
}
.register {
  padding: 7px 10px;
  display: inline-block;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #f5b923;
  color: #ffffff;
  border-radius: 5px;
  margin-top: 10px;
}
.informationbox {
  width: 280px;
  margin: 5px auto;
  padding: 12px 5px 10px 15px;
  box-sizing: border-box;
  // cursor: pointer;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 3px 3px 0px 0px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06);
  position: relative;
}
.view-patients {
  height: 46px;
  background: #f4f8fb;
  border: 1px solid #e7ecf8;
  color: #555555;
  padding: 16px 16px 14px 18px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    font-size: 16px;
  }
}
.patients-content {
  height: 161px;
  padding: 21px 0 0 18px;
  box-sizing: border-box;
  line-height: 20px;
  color: #555555;
  p {
    font-size: 14px;
    margin-bottom: 19px;
  }
}
.emergency-treatment {
  width: 50px;
  height: 24px;
  display: inline-block;
  background: #ffa712;
  border: 1px solid #f5b923;
  color: #ffffff;
  border-radius: 4px;
  margin-right: 10px;
  text-align: center;
}
.right-patients {
  flex: 0 0 300px;
  // width: 300px;
  display: flex;
  height: calc(100% - 0px);
  background: #ffffff;
  flex-direction: column;
  margin-left: 12px;
  padding-bottom: 20px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
  border-left: 10px solid #f0f2f5;
}
.neir-patients {
  width: 100%;
  height: calc(100% - 24px);
  overflow-y: auto;
  padding-bottom: 10px;
  box-sizing: border-box;
}
.content-collection {
  flex: 1;
  display: flex;
  background: #fff;
  height: calc(100% - 0px);
  overflow-y: hidden;
}
.left {
  width: 40px;
  background-color: #2b80ff;
  color: #fff;
  font-size: 20px;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 40px;
}
.status-img {
  margin-right: 10px;
}
.room-status {
  height: 30px;
  text-align: right;
}
#durgbox {
  line-height: 46px;
  width: 159px;
  height: 46px;
  opacity: 0.9;
  border-radius: 3px;
  font-size: 16px;
  margin-bottom: 6px;
  background-color: #fff;
  border: 2px dashed yellow;
  position: absolute;
  z-index: 99999;
  padding-inline-start: 0px;
}
.bed-img {
  width: 30px;
  height: 18px;
}
.house-num {
  border-radius: 3px;
  font-size: 16px;
  height: 40px;
  width: 100%;
  line-height: 40px;
  text-align: center;
}
// 颜色归类
.one-span {
  color: #4090ff;
  border-color: #4090ff;
  background-color: #f1f7ff;
}
.two-span {
  color: #fb7c75;
  border-color: #fb7c75;
  background-color: #fef3f2;
}
.one-div {
  color: #ffffff;
  background-color: #71acfd;
}
.two-div {
  color: #ffffff;
  background-color: #b0d1fe;
}
// 灰色
.three-div {
  color: #555555;
  background-color: #f3f2f2;
}
.four-div {
  color: #ffffff;
  background-color: #fc9691;
}
.five-div {
  color: #ffffff;
  background-color: #fdbdba;
}
// 颜色归类
.room-num {
  font-size: 21px;
  text-align: center;
}
.ment-name {
  text-align: center;
  padding-top: 3px;
  box-sizing: border-box;
}
.ment-state {
  display: inline-block;
  width: 45px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed;
  border-radius: 5px;
}
.ment-box {
  width: 100%;
  height: 113px;
  display: flex;
  justify-content: space-between;
}
.ment-position1 {
  border: 3px dashed #ffd905 !important;
  box-sizing: border-box;
}
.no-ment-position1 {
  border: none;
}
.ment-position {
  width: 110px;
  height: 110px;
  opacity: 0.9;
  border-radius: 3px;
  font-size: 16px;
  cursor: pointer;
  margin-right: 12px;
}
.ment-position:last-of-type {
  margin-right: 0;
}
.ment {
  height: 150px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 6px;
  box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin: 0 15px 14px 0;
  box-sizing: border-box;
}
.ck-filter-form {
  display: flex;
  align-items: top;
  overflow: hidden;
  .form-item-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    .form-item {
      display: flex;
      align-items: center;
      width: 295px;
      margin: 3px;
      margin-right: 15px;
      margin-bottom: 10px;
      .form-item-label {
        color: #909399;
        text-align: right;
        white-space: nowrap;
      }
    }
  }
  .right-btn-container {
    text-align: center;
    display: flex;
    padding-top: 5px;
    .form-item-btn {
      margin: 0px 3px;
    }
    .more-text {
      display: block;
      width: 50px;
      margin-top: 6px;
      color: #2165f9;
      cursor: pointer;
      user-select: none;
    }
  }
}
.neti-surbtn {
  width: 5px;
  height: 10px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 2px 3px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 5px;
}
.surbtn-neti {
  width: 0px;
  height: 0px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 0px 0px 0;
  transform: rotate(45deg);
  position: absolute;
  top: 1px;
  left: 5px;
}
</style>
<style lang="less">
.el-radio__inner {
  width: 17px;
  height: 17px;
}
.form-item-label {
  color: #909399;
  text-align: right;
  font-size: 16px;
  white-space: nowrap;
}
.menu__item {
  display: block;
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  cursor: pointer;
}

.menu__item1 {
  display: block;
  height: 43px;
  line-height: 43px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  cursor: not-allowed;
}

.menu {
  height: 90px;
  width: 90px;
  position: absolute;
  z-index: 99999;
  padding-inline-start: 0px;
  border-radius: 5px;
  box-shadow: 0px 3px 7px 0px rgba(199, 199, 199, 0.35);
  border: 1px solid #eeeeee;
  background-color: #ffffff;
}
</style>
